<template>
  <div class="app-container">
    <div class="up-container">
      <div v-loading="tableLoading" class="daily">
        <table>
          <caption>
            西藏公司每日运销报表
            <small>（{{ yestoday }}）</small>
          </caption>
          <tr>
            <th>机场</th>
            <th>保障 (架次)</th>
            <th>加油量 (吨)</th>
            <th>收油量 (吨)</th>
            <th>库存 (吨)</th>
            <th>预计可用 (天)</th>
            <th>备注</th>
          </tr>
          <tr v-for="item in dailyData" :key="item.name">
            <td>
              <div>{{ item.name }}</div>
            </td>
            <td
              v-if="item.name !== '拉萨新库'"
              :rowSpan="item.name === '拉萨旧库' ? 2 : 1"
            >
              <div>{{ item.oilCount || "/" }}</div>
            </td>
            <td
              v-if="item.name !== '拉萨新库'"
              :rowSpan="item.name === '拉萨旧库' ? 2 : 1"
            >
              <div>
                {{
                  item.fuelQuantity ||
                    (item.name === "配送中心" ? "/" : "0.000")
                }}
              </div>
            </td>
            <td>
              <div>{{ item.collectWeight || "0.000" }}</div>
            </td>
            <td>
              <div
                class="has-proccess"
                :style="{ 'background-size': item.proccess + '% 100%' }"
              >
                {{ item.sumWeight || "0.000" }}
              </div>
            </td>
            <td>
              <div>{{ item.result || (item.name !== "合计" ? "/" : "") }}</div>
            </td>
            <td>
              <div>{{ item.remark }}</div>
            </td>
          </tr>
        </table>
        <div class="reporter">汇报人：{{ reporterName }}</div>
      </div>
      <div v-loading="tableLoading" class="tanks">
        <table>
          <caption>
            各库站油罐储存量
            <small>（单位：吨）</small>
          </caption>
          <tr>
            <th>1#</th>
            <th>2#</th>
            <th>3#</th>
          </tr>
          <tr v-for="tank in tanksData" :key="tank.name">
            <td>
              <div
                class="has-proccess"
                :class="{ 'is-send-oil': tank.isSendOil1 }"
                :style="{ 'background-size': tank.process1 + '% 100%' }"
              >
                {{ tank.weight1 || "/" }}
              </div>
            </td>
            <td>
              <div
                class="has-proccess"
                :class="{ 'is-send-oil': tank.isSendOil2 }"
                :style="{ 'background-size': tank.process2 + '% 100%' }"
              >
                {{ tank.weight2 || "/" }}
              </div>
            </td>
            <td>
              <div
                class="has-proccess"
                :class="{ 'is-send-oil': tank.isSendOil3 }"
                :style="{ 'background-size': tank.process3 + '% 100%' }"
              >
                {{ tank.weight3 || "/" }}
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <div style="justify-content: flex-start">
                *注：标蓝数据为发油罐
              </div>
            </td>
          </tr>
        </table>
        <div class="reporter" />
      </div>
    </div>
    <div v-loading="tableLoading" class="down-container">
      <table>
        <caption>
          西藏公司各库站近7天加油量
          <small>（深红色代表近7天最大加油量、深绿色代表近7天最小加油量）</small>
        </caption>
        <tr>
          <th />
          <th v-for="item in day7" :key="item">{{ item }}</th>
          <th>平均加油量</th>
        </tr>
        <tr v-for="day in day7Data" :key="day.name">
          <td>
            <div>{{ day.name }}</div>
          </td>
          <td :colspan="day.name === '配送中心' ? 7 : 1">
            <div
              :class="{
                'is-max':
                  areFloatsEqual(day.max, day.day_1) && day.name !== '配送中心',
                'is-min':
                  areFloatsEqual(day.min, day.day_1) && day.name !== '配送中心',
              }"
            >
              {{ day.name === "配送中心" ? "" : day.day_1 }}
            </div>
          </td>
          <td v-if="day.name !== '配送中心'">
            <div
              :class="{
                'is-max': areFloatsEqual(day.max, day.day_2),
                'is-min': areFloatsEqual(day.min, day.day_2),
              }"
            >
              {{ day.day_2 }}
            </div>
          </td>
          <td v-if="day.name !== '配送中心'">
            <div
              :class="{
                'is-max': areFloatsEqual(day.max, day.day_3),
                'is-min': areFloatsEqual(day.min, day.day_3),
              }"
            >
              {{ day.day_3 }}
            </div>
          </td>
          <td v-if="day.name !== '配送中心'">
            <div
              :class="{
                'is-max': areFloatsEqual(day.max, day.day_4),
                'is-min': areFloatsEqual(day.min, day.day_4),
              }"
            >
              {{ day.day_4 }}
            </div>
          </td>
          <td v-if="day.name !== '配送中心'">
            <div
              :class="{
                'is-max': areFloatsEqual(day.max, day.day_5),
                'is-min': areFloatsEqual(day.min, day.day_5),
              }"
            >
              {{ day.day_5 }}
            </div>
          </td>
          <td v-if="day.name !== '配送中心'">
            <div
              :class="{
                'is-max': areFloatsEqual(day.max, day.day_6),
                'is-min': areFloatsEqual(day.min, day.day_6),
              }"
            >
              {{ day.day_6 }}
            </div>
          </td>
          <td v-if="day.name !== '配送中心'">
            <div
              :class="{
                'is-max': areFloatsEqual(day.max, day.day_7),
                'is-min': areFloatsEqual(day.min, day.day_7),
              }"
            >
              {{ day.day_7 }}
            </div>
          </td>
          <td>
            <div>{{ day.average }}</div>
          </td>
        </tr>
      </table>
      <table style="margin-top: -1px">
        <caption>
          西藏公司
          {{
            currentMonth
          }}
          月计划采购量
          {{
            planpurchase
          }}
          吨，目前已发
          {{
            sendedWeight
          }}
          吨 (完成本月采购计划{{
            sendedProccess
          }}%)
        </caption>
        <tr>
          <th>炼厂</th>
          <th>本月采购量</th>
          <th>本月已发量</th>
          <th>完成比例</th>
          <th>本月未发</th>
          <th>在途量</th>
          <th>备注</th>
        </tr>
        <tr v-for="item in planData" :key="item.name">
          <td>
            <div>{{ item.name }}</div>
          </td>
          <td>
            <div>{{ item.monthPlan !== null ? item.monthPlan : "/" }}</div>
          </td>
          <td>
            <div>{{ item.monthSend !== null ? item.monthSend : "/" }}</div>
          </td>
          <td>
            <div>
              {{
                item.monthProccess !== null ? item.monthProccess + " %" : "/"
              }}
            </div>
          </td>
          <td>
            <div>{{ item.monthNoSend !== null ? item.monthNoSend : "/" }}</div>
          </td>
          <td>
            <div>
              {{ item.monthInTransit !== null ? item.monthInTransit : "/" }}
            </div>
          </td>
          <td>
            <div>{{ item.remark !== null ? item.remark : "/" }}</div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { getThirdPartReportData } from '@/api/report/thirdPartReportApi'
export default {
  name: 'ThirdPartReport',
  data() {
    return {
      dailyData: [],
      tanksData: [],
      day7Data: [],
      planData: [],
      tableLoading: false,
      currentMonth: new Date().getMonth() + 1,
      planpurchase: 0,
      sendedWeight: 0,
      sendedProccess: 0
    }
  },
  computed: {
    yestoday() {
      const yestday = new Date()
      yestday.setDate(yestday.getDate() - 1)
      return yestday.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
    },
    day7() {
      const day_1 = new Date()
      const day_2 = new Date()
      const day_3 = new Date()
      const day_4 = new Date()
      const day_5 = new Date()
      const day_6 = new Date()
      const day_7 = new Date()
      day_1.setDate(day_1.getDate() - 7)
      day_2.setDate(day_2.getDate() - 6)
      day_3.setDate(day_3.getDate() - 5)
      day_4.setDate(day_4.getDate() - 4)
      day_5.setDate(day_5.getDate() - 3)
      day_6.setDate(day_6.getDate() - 2)
      day_7.setDate(day_7.getDate() - 1)
      const day1 = day_1.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
      const day2 = day_2.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
      const day3 = day_3.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
      const day4 = day_4.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
      const day5 = day_5.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
      const day6 = day_6.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
      const day7 = day_7.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      })
      return [day1, day2, day3, day4, day5, day6, day7]
    },
    reporterName() {
      return this.$store.getters.nickName
    }
  },
  created() {
    this.getReportData()
  },
  methods: {
    // 定义一个函数来比较两个浮点数是否相等
    areFloatsEqual(a, b, epsilon = 1) {
      a = Number((Number(a) * 1000).toFixed(0))
      b = Number((Number(b) * 1000).toFixed(0))
      return Math.abs(a - b) <= epsilon
    },
    async getReportData() {
      this.tableLoading = true
      try {
        const res = await getThirdPartReportData()
        // console.log(res)
        if (res.code === 200) {
          const data = JSON.parse(
            JSON.stringify(res.data).replace(/7days/g, 'day7')
          )

          const { daily, day7, plan, tanks } = data
          // 每日运销报表
          const dailyData = {}
          for (const key in daily) {
            dailyData[key] = {
              oilCount: daily[key]?.oilCount || 0,
              fuelQuantity: daily[key]?.fuelQuantity || 0,
              collectWeight: daily[key]?.collectWeight || 0,
              sumWeight: daily[key]?.sumWeight || 0,
              result: daily[key]?.result?.toFixed(0) || 0,
              total: daily[key]?.total || 0,
              proccess: (daily[key]?.sumWeight / daily[key]?.total) * 100 || 0,
              remark: daily[key]?.remark || '/'
            }
            if (key === 'lasa') {
              this.dailyData[0] = {
                name: '拉萨旧库',
                oilCount: daily[key]?.oilCount || 0,
                fuelQuantity: daily[key]?.fuelQuantity || 0,
                collectWeight: daily[key]?.oldCollectWeight || 0,
                sumWeight: daily[key]?.oldSumWeight || 0,
                total: daily[key]?.oldTotal || 0,
                proccess:
                  (daily[key]?.oldSumWeight / daily[key]?.oldTotal) * 100 || 0,
                remark: daily[key]?.oldRemark || '/',
                result: parseInt(daily[key]?.oldResult) || 0
              }
              this.dailyData[1] = {
                name: '拉萨新库',
                oilCount: daily[key]?.oilCount || 0,
                fuelQuantity: daily[key]?.fuelQuantity || 0,
                collectWeight: daily[key]?.newCollectWeight || 0,
                sumWeight: daily[key]?.newSumWeight || 0,
                total: daily[key]?.newTotal || 0,
                proccess:
                  (daily[key]?.newSumWeight / daily[key]?.newTotal) * 100 || 0,
                remark: daily[key]?.newRemark || '/',
                result: parseInt(daily[key]?.newResult) || 0
              }
            } else if (key === 'linzhi') {
              dailyData[key].name = '林芝'
              this.dailyData[2] = dailyData[key] || null
            } else if (key === 'rikaze') {
              dailyData[key].name = '日喀则'
              this.dailyData[3] = dailyData[key] || null
            } else if (key === 'ali') {
              dailyData[key].name = '阿里'
              this.dailyData[4] = dailyData[key] || null
            } else if (key === 'peisongzhongxin') {
              dailyData[key].name = '配送中心'
              this.dailyData[5] = dailyData[key] || null
            }
          }
          this.dailyData = this.dailyData.filter((item) => item !== null)
          // 计算合计行
          const sumRow = {
            name: '合计',
            oilCount:
              this.dailyData.reduce((acc, cur) => acc + cur.oilCount, 0) -
              this.dailyData[0].oilCount,
            fuelQuantity:
              this.dailyData.reduce((acc, cur) => acc + cur.fuelQuantity, 0) -
              this.dailyData[0].fuelQuantity,
            collectWeight: this.dailyData.reduce(
              (acc, cur) => acc + cur.collectWeight,
              0
            ),
            sumWeight: this.dailyData.reduce(
              (acc, cur) => acc + cur.sumWeight,
              0
            ),
            // result: this.dailyData.reduce((acc, cur) => acc + cur.result, 0),
            result: '',
            total: this.dailyData.reduce((acc, cur) => acc + cur.total, 0),
            proccess: 0,
            remark: '/'
          }
          for (const key in sumRow) {
            if (
              [
                'name',
                'oilCount',
                'result',
                'total',
                'proccess',
                'remark'
              ].includes(key)
            ) {
              continue
            } else {
              sumRow[key] = sumRow[key].toFixed(3)
            }
          }
          this.dailyData.push(sumRow)

          // 各库站油罐储存量
          let tanksData = []
          tanksData = tanks.filter(
            (item) => item.typeId === 2 && item.name.indexOf('车代罐') === -1
          )
          const lasaOld = []
          const lasaNew = []
          const linzhi = []
          const rikaze = []
          const ali = []
          const peisong = []
          const lasaOldObj = {
            name: '拉萨旧库',
            weight1: 0,
            weight2: 0,
            weight3: 0,
            process1: 0,
            process2: 0,
            process3: 0
          }
          const lasaNewObj = {
            name: '拉萨新库',
            weight1: 0,
            weight2: 0,
            weight3: 0,
            process1: 0,
            process2: 0,
            process3: 0
          }
          const linzhiObj = {
            name: '林芝',
            weight1: 0,
            weight2: 0,
            weight3: 0,
            process1: 0,
            process2: 0,
            process3: 0
          }
          const rikazeObj = {
            name: '日喀则',
            weight1: 0,
            weight2: 0,
            weight3: 0,
            process1: 0,
            process2: 0,
            process3: 0
          }
          const aliObj = {
            name: '阿里',
            weight1: 0,
            weight2: 0,
            weight3: 0,
            process1: 0,
            process2: 0,
            process3: 0
          }
          const peisongObj = {
            name: '配送中心',
            weight1: 0,
            weight2: 0,
            weight3: 0,
            process1: 0,
            process2: 0,
            process3: 0
          }
          tanksData.forEach((item) => {
            item.proccess =
              (Math.abs(item.weight - item.minCap) / Math.abs(item.maxCap - item.minCap)) * 100
            item.proccess = item.proccess.toFixed(3)
            item.isSendOil = item.status === 1
            if (item.name.indexOf('老油库') !== -1) {
              lasaOld.push(item)
            } else if (item.name.indexOf('机场油库') !== -1) {
              lasaNew.push(item)
            } else if (item.name.indexOf('林芝') !== -1) {
              linzhi.push(item)
            } else if (item.name.indexOf('日喀则') !== -1) {
              rikaze.push(item)
            } else if (item.name.indexOf('阿里') !== -1) {
              ali.push(item)
            } else if (item.name.indexOf('配送') !== -1) {
              peisong.push(item)
            }
          })

          lasaOld.forEach((item) => {
            if (item.name.indexOf('1#') !== -1) {
              lasaOldObj['weight1'] = item.weight
              lasaOldObj['process1'] = item.proccess
              lasaOldObj['isSendOil1'] = item.isSendOil
            } else if (item.name.indexOf('2#') !== -1) {
              lasaOldObj['weight2'] = item.weight
              lasaOldObj['process2'] = item.proccess
              lasaOldObj['isSendOil2'] = item.isSendOil
            } else if (item.name.indexOf('3#') !== -1) {
              lasaOldObj['weight3'] = item.weight
              lasaOldObj['process3'] = item.proccess
              lasaOldObj['isSendOil3'] = item.isSendOil
            }
          })
          lasaNew.forEach((item) => {
            if (item.name.indexOf('1#') !== -1) {
              lasaNewObj['weight1'] = item.weight
              lasaNewObj['process1'] = item.proccess
              lasaNewObj['isSendOil1'] = item.isSendOil
            } else if (item.name.indexOf('2#') !== -1) {
              lasaNewObj['weight2'] = item.weight
              lasaNewObj['process2'] = item.proccess
              lasaNewObj['isSendOil2'] = item.isSendOil
            } else if (item.name.indexOf('3#') !== -1) {
              lasaNewObj['weight3'] = item.weight
              lasaNewObj['process3'] = item.proccess
              lasaNewObj['isSendOil3'] = item.isSendOil
            }
          })
          linzhi.forEach((item) => {
            if (item.name.indexOf('1#') !== -1) {
              linzhiObj['weight1'] = item.weight
              linzhiObj['process1'] = item.proccess
              linzhiObj['isSendOil1'] = item.isSendOil
            } else if (item.name.indexOf('2#') !== -1) {
              linzhiObj['weight2'] = item.weight
              linzhiObj['process2'] = item.proccess
              linzhiObj['isSendOil2'] = item.isSendOil
            } else if (item.name.indexOf('3#') !== -1) {
              linzhiObj['weight3'] = item.weight
              linzhiObj['process3'] = item.proccess
              linzhiObj['isSendOil3'] = item.isSendOil
            }
          })
          rikaze.forEach((item) => {
            if (item.name.indexOf('1#') !== -1) {
              rikazeObj['weight1'] = item.weight
              rikazeObj['process1'] = item.proccess
              rikazeObj['isSendOil1'] = item.isSendOil
            } else if (item.name.indexOf('2#') !== -1) {
              rikazeObj['weight2'] = item.weight
              rikazeObj['process2'] = item.proccess
              rikazeObj['isSendOil2'] = item.isSendOil
            } else if (item.name.indexOf('3#') !== -1) {
              rikazeObj['weight3'] = item.weight
              rikazeObj['process3'] = item.proccess
              rikazeObj['isSendOil3'] = item.isSendOil
            }
          })
          ali.forEach((item) => {
            if (item.name.indexOf('1#') !== -1) {
              aliObj['weight1'] = item.weight
              aliObj['process1'] = item.proccess
              aliObj['isSendOil1'] = item.isSendOil
            } else if (item.name.indexOf('2#') !== -1) {
              aliObj['weight2'] = item.weight
              aliObj['process2'] = item.proccess
              aliObj['isSendOil2'] = item.isSendOil
            } else if (item.name.indexOf('3#') !== -1) {
              aliObj['weight3'] = item.weight
              aliObj['process3'] = item.proccess
              aliObj['isSendOil3'] = item.isSendOil
            }
          })
          peisong.forEach((item) => {
            if (item.name.indexOf('1#') !== -1) {
              peisongObj['weight1'] = item.weight
              peisongObj['process1'] = item.proccess
              peisongObj['isSendOil1'] = item.isSendOil
            } else if (item.name.indexOf('2#') !== -1) {
              peisongObj['weight2'] = item.weight
              peisongObj['process2'] = item.proccess
              peisongObj['isSendOil2'] = item.isSendOil
            } else if (item.name.indexOf('3#') !== -1) {
              peisongObj['weight3'] = item.weight
              peisongObj['process3'] = item.proccess
              peisongObj['isSendOil3'] = item.isSendOil
            }
          })
          this.tanksData = [
            lasaOldObj,
            lasaNewObj,
            linzhiObj,
            rikazeObj,
            aliObj,
            peisongObj
          ]

          // 近7天加油量
          const day7Data = []
          for (const key in day7) {
            if (!day7[key]) {
              day7[key] = {
                day_1: 0,
                day_2: 0,
                day_3: 0,
                day_4: 0,
                day_5: 0,
                day_6: 0,
                day_7: 0
              }
            }
            day7[key] = {
              day_1: day7[key].day_1.toFixed(3),
              day_2: day7[key].day_2.toFixed(3),
              day_3: day7[key].day_3.toFixed(3),
              day_4: day7[key].day_4.toFixed(3),
              day_5: day7[key].day_5.toFixed(3),
              day_6: day7[key].day_6.toFixed(3),
              day_7: day7[key].day_7.toFixed(3),
              average: (
                (day7[key].day_1 +
                  day7[key].day_2 +
                  day7[key].day_3 +
                  day7[key].day_4 +
                  day7[key].day_5 +
                  day7[key].day_6 +
                  day7[key].day_7) /
                7
              ).toFixed(3),
              max: (
                Math.max(
                  Number(day7[key].day_1) * 1000,
                  Number(day7[key].day_2) * 1000,
                  Number(day7[key].day_3) * 1000,
                  Number(day7[key].day_4) * 1000,
                  Number(day7[key].day_5) * 1000,
                  Number(day7[key].day_6) * 1000,
                  Number(day7[key].day_7) * 1000
                ) / 1000
              ).toFixed(3),
              min: (
                Math.min(
                  Number(day7[key].day_1) * 1000,
                  Number(day7[key].day_2) * 1000,
                  Number(day7[key].day_3) * 1000,
                  Number(day7[key].day_4) * 1000,
                  Number(day7[key].day_5) * 1000,
                  Number(day7[key].day_6) * 1000,
                  Number(day7[key].day_7) * 1000
                ) / 1000
              ).toFixed(3)
            }
            if (key === 'lasa') {
              day7[key].name = '拉萨'
              day7Data[0] = day7[key]
            } else if (key === 'linzhi') {
              day7[key].name = '林芝'
              day7Data[1] = day7[key]
            } else if (key === 'rikaze') {
              day7[key].name = '日喀则'
              day7Data[2] = day7[key]
            } else if (key === 'ali') {
              day7[key].name = '阿里'
              day7Data[3] = day7[key]
            } else if (key === 'peisong') {
              day7[key].name = '配送中心'
              day7Data[5] = day7[key]
            }
          }

          const sumRow7 = {
            name: '合计',
            day_1: day7Data
              .reduce((acc, cur) => acc + Number(cur.day_1), 0)
              .toFixed(3),
            day_2: day7Data
              .reduce((acc, cur) => acc + Number(cur.day_2), 0)
              .toFixed(3),
            day_3: day7Data
              .reduce((acc, cur) => acc + Number(cur.day_3), 0)
              .toFixed(3),
            day_4: day7Data
              .reduce((acc, cur) => acc + Number(cur.day_4), 0)
              .toFixed(3),
            day_5: day7Data
              .reduce((acc, cur) => acc + Number(cur.day_5), 0)
              .toFixed(3),
            day_6: day7Data
              .reduce((acc, cur) => acc + Number(cur.day_6), 0)
              .toFixed(3),
            day_7: day7Data
              .reduce((acc, cur) => acc + Number(cur.day_7), 0)
              .toFixed(3),
            average: day7Data
              .reduce((acc, cur) => acc + Number(cur.average), 0)
              .toFixed(3)
          }
          sumRow7.max = (
            Math.max(
              Number(sumRow7.day_1) * 1000,
              Number(sumRow7.day_2) * 1000,
              Number(sumRow7.day_3) * 1000,
              Number(sumRow7.day_4) * 1000,
              Number(sumRow7.day_5) * 1000,
              Number(sumRow7.day_6) * 1000,
              Number(sumRow7.day_7) * 1000
            ) / 1000
          ).toFixed(3)
          sumRow7.min = (
            Math.min(
              Number(sumRow7.day_1) * 1000,
              Number(sumRow7.day_2) * 1000,
              Number(sumRow7.day_3) * 1000,
              Number(sumRow7.day_4) * 1000,
              Number(sumRow7.day_5) * 1000,
              Number(sumRow7.day_6) * 1000,
              Number(sumRow7.day_7) * 1000
            ) / 1000
          ).toFixed(3)
          // for (const key in sumRow7) {
          //   if (key !== 'name') {
          //     sumRow7[key] = sumRow7[key].toFixed(3)
          //   }
          // }
          day7Data[4] = sumRow7
          day7Data[5].average = (
            Number(sumRow7.average) - Number(day7Data[3].average)
          ).toFixed(3)
          this.day7Data = day7Data

          if (this.dailyData[5].sumWeight && !this.dailyData[5].result) {
            this.dailyData[5].result = (
              Number(this.dailyData[5].sumWeight) / Number(day7Data[5].average)
            ).toFixed(0)
          }

          // 计划加油量
          const yulian = {
            name: '玉炼',
            monthPlan: null,
            monthSend: null,
            monthProccess: null,
            monthNoSend: null,
            monthInTransit: null,
            remark: null
          }
          const gelian = {
            name: '格炼',
            monthPlan: null,
            monthSend: null,
            monthProccess: null,
            monthNoSend: null,
            monthInTransit: null,
            remark: null
          }
          const lanlian = {
            name: '兰炼',
            monthPlan: null,
            monthSend: null,
            monthProccess: null,
            monthNoSend: null,
            monthInTransit: null,
            remark: null
          }
          const tahe = {
            name: '塔河',
            monthPlan: null,
            monthSend: null,
            monthProccess: null,
            monthNoSend: null,
            monthInTransit: null,
            remark: null
          }
          const heji = {
            name: '合计',
            monthPlan: null,
            monthSend: null,
            monthProccess: null,
            monthNoSend: null,
            monthInTransit: null,
            remark: null
          }
          plan[0]?.detailInfos?.forEach((item) => {
            let totalSendWeight = 0
            let totalCompleteWeight = 0
            if (item.onways.length) {
              const arr = item.onways.filter((item) => item.extra1 !== 3)
              totalSendWeight = arr.reduce(
                (total, onway) => total + (onway.sendWeight || 0),
                0
              )
              const arr2 = item.onways.filter((item) => item.extra1 === 3)
              totalCompleteWeight = arr2.reduce(
                (total, onway) => total + (onway.sendWeight || 0),
                0
              )
            }

            if (item.refineryName.indexOf('玉') !== -1) {
              yulian.monthPlan = item.quantity || 0
              yulian.monthInTransit = totalSendWeight.toFixed(3)
              yulian.monthSend = (Number(totalSendWeight) + Number(totalCompleteWeight)).toFixed(3)
              yulian.monthNoSend = (item.quantity - Number(totalSendWeight) - Number(totalCompleteWeight) || 0).toFixed(3)
              yulian.monthProccess = (((Number(totalSendWeight) + Number(totalCompleteWeight)) / item.quantity) * 100).toFixed(2)
              yulian.remark = ''
            } else if (item.refineryName.indexOf('格') !== -1) {
              gelian.monthPlan = item.quantity || 0
              gelian.monthInTransit = totalSendWeight.toFixed(3)
              gelian.monthSend = (Number(totalSendWeight) + Number(totalCompleteWeight)).toFixed(3)
              gelian.monthNoSend = (item.quantity - Number(totalSendWeight) - Number(totalCompleteWeight) || 0).toFixed(3)
              gelian.monthProccess = (((Number(totalSendWeight) + Number(totalCompleteWeight)) / item.quantity) * 100).toFixed(2)
              gelian.remark = ''
            } else if (item.refineryName.indexOf('兰') !== -1) {
              lanlian.monthPlan = item.quantity || 0
              lanlian.monthInTransit = totalSendWeight.toFixed(3)
              lanlian.monthSend = (Number(totalSendWeight) + Number(totalCompleteWeight)).toFixed(3)
              lanlian.monthNoSend = (item.quantity - Number(totalSendWeight) - Number(totalCompleteWeight) || 0).toFixed(3)
              lanlian.monthProccess = (((Number(totalSendWeight) + Number(totalCompleteWeight)) / item.quantity) * 100).toFixed(2)
              lanlian.remark = ''
            } else if (item.refineryName.indexOf('塔河') !== -1) {
              tahe.monthPlan = item.quantity || 0
              tahe.monthInTransit = totalSendWeight.toFixed(3)
              tahe.monthSend = (Number(totalSendWeight) + Number(totalCompleteWeight)).toFixed(3)
              tahe.monthNoSend = (item.quantity - Number(totalSendWeight) - Number(totalCompleteWeight) || 0).toFixed(3)
              tahe.monthProccess = (((Number(totalSendWeight) + Number(totalCompleteWeight)) / item.quantity) * 100).toFixed(2)
              tahe.remark = ''
            }
          })

          heji.monthPlan = (
            Number(yulian.monthPlan) +
            Number(gelian.monthPlan) +
            Number(lanlian.monthPlan) +
            Number(tahe.monthPlan)
          ).toFixed(3)
          heji.monthInTransit = (
            Number(yulian.monthInTransit) +
            Number(gelian.monthInTransit) +
            Number(lanlian.monthInTransit) +
            Number(tahe.monthInTransit)
          ).toFixed(3)
          heji.monthSend = (
            Number(yulian.monthSend) +
            Number(gelian.monthSend) +
            Number(lanlian.monthSend) +
            Number(tahe.monthSend)
          ).toFixed(3)
          heji.monthNoSend = (
            Number(yulian.monthNoSend) +
            Number(gelian.monthNoSend) +
            Number(lanlian.monthNoSend) +
            Number(tahe.monthNoSend)
          ).toFixed(3)
          heji.monthProccess = (
            (Number(heji.monthSend) / Number(heji.monthPlan)) *
            100
          ).toFixed(2)
          heji.remark = ''
          this.planpurchase = heji.monthPlan
          this.sendedWeight = heji.monthSend
          this.sendedProccess = heji.monthProccess
          this.planData = [yulian, gelian, lanlian, tahe, heji]

          this.tableLoading = false
        } else {
          this.$message.error('获取数据失败')
          this.tableLoading = false
        }
      } catch (err) {
        console.log(err)
        this.$message.error('获取数据失败')
        this.tableLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;

  table {
    width: 100%;
    flex-grow: 1;
    border: 1px solid #ddd;
    border-collapse: collapse;

    caption {
      font-size: 18px;
      font-weight: bold;
      line-height: 36px;
      border: 1px solid #ddd;
      border-bottom: none;

      small {
        font-size: 16px;
        font-weight: normal;
      }
    }

    tr {
      th {
        font-size: 16px;
      }

      th,
      td {
        border: 1px solid #ddd;
        padding: 4px;
        text-align: center;

        div {
          height: 24px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          font-size: 16px;

          &.has-proccess {
            background: rgb(255, 185, 185);
            background: linear-gradient(
              270deg,
              rgba(255, 10, 10, 0.2) 0%,
              rgba(255, 10, 10, 0.9) 100%
            );
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: left top;
          }

          &.is-send-oil {
            color: rgb(45, 146, 246);
          }

          &.is-max {
            background-color: #ffc7ce;
            color: #ce2206;
          }

          &.is-min {
            background-color: #c6efce;
            color: #009089;
          }
        }
      }

      &:nth-child(n + 2) {
        border-top: 1px solid #ddd;
      }
    }
  }

  .reporter {
    height: 24px;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
  }
}

.up-container {
  min-height: 40%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  overflow: hidden;

  .daily {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    flex-shrink: 0;

    & > table {
      background-color: #f5f5f5;

      caption {
        background-color: #f5f5f5;
      }

      tr {
        &:nth-child(even) {
          background-color: #f5f5f5;
        }

        &:nth-child(odd) {
          background-color: #ddebf7;
        }

        &:nth-child(2) {
          background-color: #ddebf7;
        }

        &:nth-child(3) {
          background-color: #f5f5f5;
        }
      }
    }
  }

  .tanks {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    flex-shrink: 0;
  }
}

.down-container {
  margin-top: 10px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;

  table {
    &:last-child {
      caption {
        font-weight: normal;
      }
    }
  }
}
</style>
